<template>
  <div class="basemap">
    <div id="map" class="map"></div>
  </div>
</template>

<script>
import $ from "jquery";

export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    // 初始化地图
    this.initMap();
    // 添加标记
    this.addMarker();
    // 添加圆形
    this.addCircle();
    // 添加面
    this.addPolygon();
    // 添加弹窗
    this.addPopup();
    // 地图点击事件
    this.map.on("click", this.onMapClick);
    // 添加geojson文件 文件报错
    this.addGeoJson();
    // 添加雷达
    this.addRadar();
  },
  methods: {
    initMap() {
      // 重庆市经纬度
      const cqp = this.$L.latLng(29.5647398, 106.5478767);

      this.map = this.$L
        .map("map", {
          // 版权控件
          attributionControl: false,
          // 缩放控件
          zoomControl: false,
        })
        .setView(cqp, 8);

      // 天地图token
      const tdtToken = "810e2cf8deac0489c6bb8ee29e5d9591";
      // 天地图 影像底图
      const wmtsImg =
        "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
        tdtToken;

      this.$L
        .tileLayer(wmtsImg, {
          maxZoom: 18,
        })
        .addTo(this.map);
    },
    addMarker() {
      // 无法自动获取默认图标
      // 自定义图标
      let DefaultIcon = this.$L.icon({
        iconUrl: require("leaflet/dist/images/marker-icon-2x.png"),
        iconRetinaUrl: require("leaflet/dist/images/marker-icon.png"),
        shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
        iconSize: [25, 41], // 图标大小
        iconAnchor: [12, 41], // 图标锚点
        popupAnchor: [1, -34], // 弹出窗口应相对于 iconAnchor 打开的位置
        tooltipAnchor: [16, -28], // 工具提示锚点
        shadowSize: [41, 41], // 阴影大小
      });
      this.$L.Marker.prototype.options.icon = DefaultIcon;

      const marker = this.$L.marker([29.65772, 106.491]).addTo(this.map).bindPopup("生态环境局");
    },
    addGeoJson() {
      // 引入geojson文件
      $.getJSON("../data/json/500000.geoJson", (data) => {
        const area = data;
        // 设置样式
        const myStyle = {
          color: "black",
        };
        this.$L
          .geoJSON(area, {
            // 设置feature样式
            style: (feature) => {
              if (feature.properties.name == "渝北区") {
                return { color: "red", fillColor: "yellow" };
              }
              if (feature.properties.adcode == "500105") {
                return { color: "blue", fillColor: "green", weight: 5 };
              }
              return myStyle;
            },
            // 控制feature可见性
            filter: (feature) => {
              if (feature.properties.adcode == "500113") {
                return false;
              } else return true;
            },
          })
          .addTo(this.map);
      });
    },
    addCircle() {
      const circlePoint = this.$L.latLng(29.65932, 106.4874);
      const circle = this.$L
        .circle(circlePoint, {
          color: "red", // 边框颜色
          fillColor: "#f03", // 填充颜色
          fillOpacity: 0.3, // 填充透明度
          radius: 200, // 半径
        })
        .addTo(this.map);
      circle.bindPopup("我是一个圆");
    },
    addPolygon() {
      // 形成面各点经纬度
      const polygonPoint = [
        [29.65942, 106.49196],
        [29.65952, 106.495],
        [29.65855, 106.495],
        [29.65844, 106.492],
      ];
      const polygon = this.$L
        .polygon(polygonPoint, {
          color: "blue", // 边框颜色
          fillColor: "#66f", // 填充颜色
          fillOpacity: 0.3, // 填充透明度
        })
        .addTo(this.map)
        .bindPopup("我是一个面");
    },
    addPopup() {
      // 关闭其他弹窗
      const popup = this.$L
        .popup()
        .setLatLng([29.65582, 106.4935])
        .setContent("九曲河公园<br>我是一个弹窗")
        .openOn(this.map);
    },
    onMapClick(e) {
      // 可以打印 但无法读取到e.latLng
      console.log(e);
      // this.$L
      //   .popup()
      //   .setLatLng(e.latLng)
      //   .setContent("您点击了:<br><hr>" + e.latLng)
      //   .openOn(this.map);
    },
    getPointJson() {
      $.getJSON("../data/json/500000.geoJson", (data) => {
        let pointsJson = [];
        data.map((item) => {
          const geometry = {
            type: "Point",
            coordinates: item.properties.center,
          };
          const properties = {
            name: item.properties.name,
            level: item.properties.level,
            center: item.properties.center,
          };
          pointsJson.push({
            type: "Feature",
            geometry: geometry,
            properties: properties,
          });
        });
        console.log(pointsJson);
        this.$L.geoJSON(pointsJson, {
          style: (feature) => {
            return { color: "red", weight: 1000 };
          },
        });
      });
    },
    addRadar(){
      var layer = this.$L.radar({
            radius: 1,
            center: [ 29.5,109],
            period: 5,
            startAngle: 0,
            loop: true,
            centerStyle: {
                fillColor: 'blue',
                opacity: 0
            },
            circleStyle: {
                fillColor: "blue",
                fillOpacity: 0.1,
                color: "blue",
                opacity: 1
            },
            arcStyle: {
                fillColor: "blue",
                fillOpacity: 0.05,
                opacity: 0
            }
        }).addTo(this.map);

        layer.start();

        // setTimeout(()=>{
        //   this.map.removeLayer(layer)
        // },3000)
    },
  },
  destroyed() {
    this.map.remove();
  },
};
</script>

<style lang="scss" scoped>
</style>